<template>
  <div class="loginContent">
    <div>
      <homeTab></homeTab>
    </div>
    <div class="content">
      <div class="box">
        <div class="top" v-html="isRegister==1?'注 册':'登 录'"></div>
        <div class="center">
          <div class="name">
            <p>姓名</p>
            <el-input v-model="name"></el-input>
          </div>
          <div class="password">
            <p>密码</p>
            <el-input v-model="password" show-password></el-input>
          </div>
        </div>
        <div class="bot">
          <div class="other">
            <span class="underLine cursor" style="color:#909399" v-html="isRegister==1?'登录':'注册'" @click="toMyself"></span>
          </div>
          <div class="btn" :style="isRegister==1?'background-color:#409EFF':'background-color:#67C23A'" v-html="isRegister==1?'立即注册':'登录'" @click="toButton"></div>
        </div>
        <div class="create" style="width:100px;height:50px;background-color:yellow" @click="toCreate">create</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/index'
import { mapMutations,mapGetters } from 'vuex'
import homeTab from '@/components/homeCom/homeTab.vue'
export default {
  name:'login',
  components:{homeTab},
  data(){
    return{
      isRegister: 0,
      name: '',
      password:''
    }
  },
  created(){
    if(this.$route.query.type){
      this.isRegister = this.$route.query.type
    }
  },
  computed:{
    ...mapGetters(['userInfo'])
  },
  methods:{
    ...mapMutations({
      setUserInfo : 'SET_USERINFO'
    }),
    toButton(){
      if(this.isRegister==0){
        this.toLogin()
      }else{
        this.toRegister()
      }
    },
    async toLogin(){
      let user = {
        name:this.name,
        password:this.password
      }
      let res = await this.$axios.post(api.login,user)
      if(res.status===200){
        localStorage.setItem('token',res.data.token)
        this.setUserInfo(res.data)
        this.$router.push('/')
      }else{
        this.$message.warning(response.data)
      }
    },
    toRegister(){
    },
    toMyself(){
      if(this.isRegister==0){
        this.$router.push({path:'/login',query:{type:1}})
        this.$router.go(0)
      }else{
        this.$router.push({path:'/login',query:{type:0}})
        this.$router.go(0)
      }
    },
    toCreate(){
      this.$router.push({path:'/createMoment'})
    }
  }
}
</script>

<style lang="scss" scoped>
.loginContent{
  color: #333;
  .content{
    width: 100%;
    min-height: 100vh;
    background: url('../../assets/image/loginBg.jpg') no-repeat;
    background-size: cover;
    .box{
      display: inline-block;
      margin: 120px auto;
      width: 350px;
      padding: 50px 50px;
      border-radius: 15px;
      background-color: white;
      .bot{
        .other{
          display: flex;
          flex-direction: row-reverse;
          justify-content: space-between;
        }
        .btn{
          color: white;
          line-height: 40px;
          width: 200px;
          border-radius: 5px;
          margin: 0 auto;
          margin-top: 20px;
          cursor: pointer;
          &:hover{
            background-color: #555;
          }
        }
      }
      .center{
        >div{
          padding: 10px 0;
          >p{
            font-size: 18px;
            text-align: left;
            color: #909399;
            margin: 0 0 5px 0;
          }
          ::v-deep .el-input__inner{
            border: 0;
            border-bottom: 1px solid #DCDFE6;
            border-radius: 0;
            font-size: 18px;
            color: #333;
            height: 34px;
            padding: 0;
          }
        }
      }
      .top{
        font-size: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: #555;
        &::before{
          display: inline-block;
          content: '';
          height: 2px;
          width: 80px;
          background: #909399;
          background: linear-gradient(to left,#909399,#fff);
          margin-right: 10px;
        }
        &::after{
          display: inline-block;
          content: '';
          height: 2px;
          width: 80px;
          background: #909399;
          background: linear-gradient(to right,#909399,#fff);
          margin-left: 10px;
        }
      }
    }
  }
}
</style>